<template>
    <div>
        <div class="sxm-header">
            <div class="left">
                模版：<el-select v-model="templateDetermine" class="m-2" placeholder="请选择模版" size="small"
                    @change="templateChange">
                    <el-option v-for="item in templateList" :key="item.value" :label="item.name" :value="item" />
                </el-select>
            </div>
            <div class="rigth">
                <el-button type="primary" size="small" @click="createNew">新增</el-button>
                <el-button type="primary" size="small" @click="saveSettings">保存</el-button>
            </div>
        </div>
        <div class="sxm-main" v-if="!XEUtils.isEmpty(Fields)">
            <div class="disflex">
                <div class="prints" :style="Fields.base.style" style="border: 1px solid;">
                    <div class="print_top" v-if="Fields.base.isHead">
                        <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;overflow: hidden;">
                            <div v-for="(item,index) in  Fields['header']"
                                    :style="{float: 'left',height: Fields.base.height+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                    :key="index">
                                    <div v-if="item.type=='text'">
                                        <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                            {{ item.title ? item.title + ' :' : '' }}{{ ft(item) }}
                                        </span>
                                    </div>
                                    <div v-else-if="item.type=='customize'">
                                        <div :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px',padding:XEUtils.toValueString(item.style.padding)?item.style.padding:'',textAlign:XEUtils.toValueString(item.style.textAlign)?item.style.textAlign:''}">
                                            {{ item.text }}
                                        </div>
                                    </div>
                                    <div v-if="(item.type==='image'||item.type==='code')">
                                        <img :style="item['style']===''?{}:item['style']" alt :src="item.text" v-if="(item.type=='image')"/>
                                        <sxmbarcode
                                            :style="item.style==='' ? '' : item.style"
                                            v-if="(item.type==='code')"
                                            :value="ft(item)"
                                            :format="item.format"
                                            :height="item.height"
                                            :displayValue="item.displayValue"
                                        ></sxmbarcode>
                                    </div>
                                </div>
                        </div>
                    </div>
                    <vxe-table v-if="(Fields.base.iscard==='1'&&Fields.base.isBody)"
                            :data="tableList"
                            border="full"
                            size="small"
                        >
                            <vxe-column type="seq" width="50" v-if="Fields.base.showSeq" :resizable="increaseWidth"></vxe-column>
                            <vxe-column v-for="(item,index) in Fields['detail']" :field="item.fieldName" :key="index"
                              :width="'100'" :resizable="increaseWidth"
                              :title="item.title"
                              :header-align="'center'">
                              <template #header="{column}">
                                <span :style="{fontSize:Fields.base.fontSize+'px'}">
                                  {{column['title']}}
                                </span>
                              </template>
                               <template #default="{ row }">
                                    <span v-if="(item.type=='text')" :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                        {{row[item.fieldName]}}
                                    </span>
                                    <span v-else-if="(item.type=='date')" :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                        {{XEUtils.toDateString(row[item.fieldName])}}
                                    </span>
                                    <sxmbarcode
                                        style="margin-top: 1px;"
                                        :style="item.style==='' ? '' : item.style"
                                        v-else-if="(item.type==='code'&&row[item.fieldName])"
                                        :value="row[item.fieldName]"
                                        :format="item.format"
                                        :height="item.height"
                                        :displayValue="item.displayValue"
                                    ></sxmbarcode>
                              </template> 
                            </vxe-column>
                    </vxe-table>
                    <div class="cardsx" v-if="(Fields.base.iscard==='2'&&Fields.base.isBody)" style="margin-top: 10px">
                        <div v-for="(v,i) in tableList" :key="i"
                        :style="{'page-break-after':fy(i)}">
                            <div class="box-card"
                                :style="{'margin-top': '10px','display':' inline-block','width':Fields.base.cardGrid/24*100+'%','margin-right':jiangepanduan(i)}">
                                <div style="border:1px solid rgb(122, 122, 122);overflow: hidden;border-radius: 2px;">
                                    <div v-for="(item,index) in Fields['detail']" :key="index" class="borderbotom"
                                        :style="{float: 'left',width:item.span/24*100+'%','height':item.heighty?Fields.base.height*item.heighty+'px':Fields.base.height+'px','line-height':Fields.base.height+'px'}">
                                        <span v-if="((item.type!=='code')&&item.type!='image')&&Fields.detail[index]['direction']===0"
                                            :style="{'padding':' 5px','box-sizing':' border-box','display':item.style['fontSize']>Fields.base.fontSize?'block':'initial','line-height': 'initial','font-size':item.style['fontSize']+'px','line-height':(item.style['fontSize']>Fields.base.fontSize?item.style['fontSize']:Fields.base.height)+'px'}">
                                            {{item.title}}:{{v[item.fieldName]}}
                                        </span>
                                        <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                            v-show="((item.type!=='code')&&item.type!='image'&&Fields.detail[index]['direction']===1)">
                                            <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                style="border-bottom:1px solid #000;padding:0 5px;box-sizing: border-box;">
                                            {{ item.title }}
                                            </div>
                                            <div :style="{'line-height':Fields.base.height+'px','font-size':item['fontSize']+'px'}"
                                                style="padding:0 5px;box-sizing: border-box;">
                                            {{ v[item.fieldName] }}
                                            </div>
                                        </div>
                                        <sxmbarcode
                                            style="padding: 10px; text-align: center"
                                            :style="item.style==='' ? '' : item.style"
                                            v-if="(item.type==='code'&&v[item.fieldName])"
                                            :value="v[item.fieldName]"
                                            :format="item.format"
                                            :height="item.height"
                                            :displayValue="item.displayValue"
                                        ></sxmbarcode>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="print_top" v-if="Fields.base.isFooter" style="margin-top: 10px">
                        <div style="display: inline-block;width: 100%;font-size: 20px;position: relative;overflow: hidden;">
                            
                            <div v-for="(item,index) in  Fields['isFooter']"
                                :style="{float: 'left',height: Fields.base.height+'px',lineHeight: Fields.base.height+'px',width:item.span/24*100+'%'}"
                                :key="index">
                                <div v-if="item.type=='text'">
                                    <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                        {{ item.title ? item.title + ' :' : '' }}{{ ft(item) }}
                                    </span>
                                </div>
                                <div v-else-if="item.type=='customize'">
                                    <div :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px',padding:XEUtils.toValueString(item.style.padding)?item.style.padding:'',textAlign:XEUtils.toValueString(item.style.textAlign)?item.style.textAlign:''}">
                                        {{ item.text }}
                                    </div>
                                </div>
                                <div v-if="(item.type==='image'||item.type==='code')">
                                    <img :style="item['style']===''?{}:item['style']" alt :src="item.text" v-if="(item.type=='image')"/>
                                    <sxmbarcode
                                        :style="item.style==='' ? '' : item.style"
                                        v-if="(item.type==='code')"
                                        :value="ft(item)"
                                        :format="item.format"
                                        :height="item.height"
                                        :displayValue="item.displayValue"
                                    ></sxmbarcode>
                                </div>
                                <div v-else :style="item['style']===''?{}:item['style']">
                                    <span :style="{fontSize:XEUtils.toValueString(item.style.fontSize)!==''?item.style.fontSize:Fields.base.fontSize+'px'}">
                                     {{ item.title!=='' ? item.title + ' :' : '' }}{{ ft(item) }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="flex:1;margin-left: 10px;">
                    <el-tabs v-model="activeName" class="demo-tabs">
                        <el-tab-pane label="基础" name="first">
                            <el-form size="small">
                                <el-form-item label="模板名称">
                                    <el-input size="small" style="width:80px" v-model="printData.name" placeholder="模板名称"></el-input>
                                </el-form-item>
                                <el-form-item label="明细表名">
                                    <el-select v-model="Fields.base.tableNames" class="m-2" placeholder="请选择" size="small" @change="changeTab">
                                        <el-option
                                            v-for="items in DetailTables"
                                            :key="items.value"
                                            :label="items.tableTitle"
                                            :value="items.tableName"
                                        />
                                      </el-select>
                                </el-form-item>
                                <el-form-item label="边距">
                                    <span style="margin:0 10px;">上</span>
                                    <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingTop"
                                              placeholder="单位PX"></el-input>
                                    <span style="margin:0 10px;">左</span>
                                    <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingLeft"
                                              placeholder="单位PX"></el-input>
                                    <span style="margin:0 10px;">下</span>
                                    <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingBottom"
                                              placeholder="单位PX"></el-input>
                                    <span style="margin:0 10px;">右</span>
                                    <el-input size="small" style="width:80px" v-model="Fields.base.style.paddingRight"
                                              placeholder="单位PX"></el-input>
                                </el-form-item>
                                <el-radio-group v-model="Fields.base.iscard" class="ml-4">
                                    <el-radio label="1" size="large">表格模式</el-radio>
                                    <el-radio label="2" size="large">卡片模式</el-radio>
                                </el-radio-group>
                                <el-form-item label="强制分页" v-if="Fields.base.iscard==='2'">
                                    <el-select v-model="Fields.base.fy" size="small" class="m-2">
                                      <el-option label="否" :value="0"></el-option>
                                      <el-option label="1" :value="1"></el-option>
                                      <el-option label="2" :value="2"></el-option>
                                      <el-option label="4" :value="4"></el-option>
                                      <el-option label="6" :value="6"></el-option>
                                      <el-option label="8" :value="8"></el-option>
                                      <el-option label="10" :value="10"></el-option>
                                      <el-option label="12" :value="12"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="字号">
                                    <el-input-number placeholder="请输入" v-model="Fields.base.fontSize" size="small"></el-input-number>
                                </el-form-item>
                                <el-form-item label="行高">
                                    <el-input-number  placeholder="请输入" v-model="Fields.base.height" size="small"></el-input-number >
                                </el-form-item>
                                <el-form-item label="页宽">
                                    <el-input-number placeholder="请输入" v-model="Fields.base.pageSize" size="small"></el-input-number>
                                </el-form-item>
                                <el-form-item label="卡片栅格" v-if="Fields.base.iscard==='2'">
                                    <el-input-number v-model="Fields.base.cardGrid" size="small" :min="1" :max="24"/>
                                  </el-form-item>
                                  <el-form-item label="卡片间隔" v-if="Fields.base.iscard==='2'">
                                    <el-input-number v-model="Fields.base.cardInterval" size="small" :min="0"/>
                                  </el-form-item>
                                  <el-form-item label="打印确认">
                                    <el-checkbox v-model="Fields.base.isHead" label="表头" size="large"/>
                                    <el-checkbox v-model="Fields.base.isBody" label="表体" size="large"/>
                                    <el-checkbox v-model="Fields.base.isFooter" label="表尾" size="large"/>
                                  </el-form-item>
                                  <el-form-item label="表体选项" v-if="Fields.base.isBody">
                                    <el-checkbox v-model="Fields.base.showSeq" label="显示序号" size="large"/>
                                  </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="表头" name="second">
                            <div style="margin-bottom: 10px;">
                                <el-button size="small" @click="insertEvent">新增</el-button>
                                <el-button size="small" @click="removeEvent">删除</el-button>
                                <el-button size="small" @click="moveUp">上移</el-button>
                                <el-button size="small" @click="moveDown">下移</el-button>
                            </div>
                            <el-table :data="Fields.header" size="small" border height="250" highlight-current-row @row-click="handle" style="width: 100%;" @selection-change="handleSelectionChange">
                                <el-table-column type="selection" width="55" />
                                <el-table-column prop="type" label="类型">
                                    <template #default="{row}">
                                        <div>
                                            {{tableFt(row)}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="text" label="值">
                                    <template #default="{row}">
                                        <div>
                                            {{ft(row)}}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-form v-if="highlight" size="small" style="margin-top: 10px;">
                                <el-form-item label="类型">
                                    <el-select v-model="highlight.type" class="m-2" @change="()=>{highlight['span']=24}" placeholder="请选择">
                                        <el-option
                                        v-for="item in typeList"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="条码类型" v-if="highlight.type==='code'">
                                    <el-select v-model="highlight.format" class="m-2">
                                      <el-option label="CODE128" value="CODE128"></el-option>
                                      <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                      <el-option label="CODE39" value="CODE39"></el-option>
                                      <el-option label="MSI" value="MSI"></el-option>
                                      <el-option label="二维码" value="二维码"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="值" v-if="highlight.type!=='code'">
                                    <el-input v-if="highlight.type=='customize'" v-model="highlight.text"/>
                                    <el-select v-if="highlight.type!='customize'" v-model="highlight.fieldName" class="m-2">
                                        <el-option  v-for="elm in mainList" :label="elm.fieldTitle" :value="elm.fieldName" @click="mainTop(elm)"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="边距" v-if="highlight.type=='customize'">
                                    <el-input v-model="highlight['style'].padding" placeholder="事例：0px 2px 3px 4px"></el-input>
                                </el-form-item>
                                <el-form-item label="位置" v-if="highlight.type==='customize'">
                                    <el-select v-model="highlight['style'].textAlign" class="m-2">
                                        <el-option label="左" value="left"></el-option>
                                        <el-option label="中" value="center"></el-option>
                                        <el-option label="右" value="right"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="字号" v-if="highlight.type!='code'">
                                    <el-input v-model="highlight['style'].fontSize" placeholder="单位（px）"></el-input>
                                </el-form-item>
                                <el-form-item label="条码大小" v-if="highlight.type==='code'">
                                    <el-input-number
                                        v-model="highlight.height"
                                        :min="20"
                                        controls-position="right"
                                        size="small"
                                    />
                                  </el-form-item>
                                <el-form-item label="栅格">
                                    <el-input-number
                                        v-model="highlight.span"
                                        :min="0"
                                        :max="24"
                                        controls-position="right"
                                        size="small"
                                    />
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="表体" name="third">
                            <div style="margin-bottom: 10px;">
                                <el-button size="small" @click="detailInsertEvent">新增</el-button>
                                <el-button size="small" @click="detailRemoveEvent">删除</el-button>
                                <el-button size="small" @click="detailMoveUp">上移</el-button>
                                <el-button size="small" @click="detailMoveDown">下移</el-button>
                            </div>
                            <el-table :data="Fields.detail" size="small" border height="250" highlight-current-row @row-click="detailRow" style="width: 100%;" @selection-change="detailSelectionChange">
                                <el-table-column type="selection" width="55" />
                                <el-table-column prop="type" label="类型">
                                    <template #default="{row}">
                                        <div>
                                            {{tableFt(row)}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="text" label="值">
                                    <template #default="{row}">
                                        <div>
                                            {{fts(row)}}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-form v-if="detailHighlight" size="small" style="margin-top: 10px;">
                                <el-form-item label="类型">
                                    <el-select v-model="detailHighlight.type" class="m-2" placeholder="请选择">
                                        <el-option
                                        v-for="item in typeList"
                                        :key="item.value"
                                        :label="item.name"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="条码类型" v-if="detailHighlight.type==='code'">
                                    <el-select v-model="detailHighlight.format" class="m-2">
                                      <el-option label="CODE128" value="CODE128"></el-option>
                                      <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                      <el-option label="CODE39" value="CODE39"></el-option>
                                      <el-option label="MSI" value="MSI"></el-option>
                                      <el-option label="二维码" value="二维码"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="值">
                                    <el-input v-if="detailHighlight.type=='customize'" v-model="detailHighlight.text"/>
                                    <el-select v-if="detailHighlight.type!='customize'" v-model="detailHighlight.fieldName" class="m-2">
                                        <el-option  v-for="elm in tiList" :label="elm.fieldTitle" :value="elm.fieldName" @click="detailTop(elm)"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="detailHighlight.type!=='code'" label="字号">
                                    <el-input placeholder="请输入" v-model="detailHighlight.style['fontSize']" size="small"></el-input>
                                </el-form-item>
                                <el-form-item v-if="detailHighlight.type=='code'" label="字号">
                                    <el-input-number placeholder="请输入" v-model="detailHighlight.height" size="small"></el-input-number>
                                </el-form-item>
                                <el-form-item label="高" v-show="Fields.base.iscard==='2'">
                                    <el-input-number
                                        v-model="detailHighlight.heighty"
                                        :min="1"
                                        :max="140"
                                        controls-position="right"
                                        size="small"
                                    />
                                </el-form-item>
                                <el-form-item label="宽" v-show="Fields.base.iscard==='1'">
                                    <el-input v-model="detailHighlight.width" controls-position="right" size="small"/>
                                </el-form-item>
                                <el-form-item label="方向">
                                    <el-select class="m-2" v-model="detailHighlight.direction" placeholder="方向" size="small">
                                      <el-option
                                          label="左右"
                                          :value="0"
                                      />
                                      <el-option
                                          label="上下"
                                          :value="1"
                                      />
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                        <el-tab-pane label="表尾" name="fourth">
                            <div style="margin-bottom: 10px;">
                                <el-button size="small" @click="isFooterinsertEvent">新增</el-button>
                                <el-button size="small" @click="isFooterremoveEvent">删除</el-button>
                                <el-button size="small" @click="isFootermoveUp">上移</el-button>
                                <el-button size="small" @click="isFootermoveDown">下移</el-button>
                            </div>
                            <el-table :data="Fields.isFooter" size="small" border height="250" highlight-current-row @row-click="isFooterRow" style="width: 100%;" @selection-change="isFooterSelectionChange">
                                <el-table-column type="selection" width="55" />
                                <el-table-column prop="type" label="类型">
                                    <template #default="{row}">
                                        <div>
                                            {{tableFt(row)}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="text" label="值">
                                    <template #default="{row}">
                                        <div>
                                            {{ft(row)}}
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-form v-if="isFooterhighlight" size="small" style="margin-top: 10px;">
                                <el-form-item label="类型">
                                    <el-select v-model="isFooterhighlight.type" class="m-2" @change="()=>{isFooterhighlight['span']=24}" placeholder="请选择">
                                        <el-option
                                        v-for="item in typeList"
                                        :key="item"
                                        :label="item.name"
                                        :value="item.value"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="条码类型" v-if="isFooterhighlight.type==='code'">
                                    <el-select v-model="isFooterhighlight.format" class="m-2">
                                      <el-option label="CODE128" value="CODE128"></el-option>
                                      <el-option label="EAN/UPC" value="EAN/UPC"></el-option>
                                      <el-option label="CODE39" value="CODE39"></el-option>
                                      <el-option label="MSI" value="MSI"></el-option>
                                      <el-option label="二维码" value="二维码"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="值" v-if="isFooterhighlight.type!=='code'">
                                    <el-input v-if="isFooterhighlight.type=='customize'" v-model="isFooterhighlight.text"/>
                                    <el-select v-if="isFooterhighlight.type!='customize'" v-model="isFooterhighlight.fieldName" class="m-2">
                                        <el-option  v-for="elm in mainList" :label="elm.name" :value="elm.value" @click="isFooterTop(elm)"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="边距" v-if="isFooterhighlight.type=='customize'">
                                    <el-input v-model="isFooterhighlight['style'].padding" placeholder="事例：0px 2px 3px 4px"></el-input>
                                </el-form-item>
                                <el-form-item label="位置" v-if="isFooterhighlight.type==='customize'">
                                    <el-select v-model="isFooterhighlight['style'].textAlign" class="m-2">
                                        <el-option label="左" value="left"></el-option>
                                        <el-option label="中" value="center"></el-option>
                                        <el-option label="右" value="right"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="字号" v-if="isFooterhighlight.type!='code'">
                                    <el-input v-model="isFooterhighlight['style'].fontSize" placeholder="单位（px）"></el-input>
                                </el-form-item>
                                <el-form-item label="条码大小" v-if="isFooterhighlight.type==='code'">
                                    <el-input-number
                                        v-model="isFooterhighlight.height"
                                        :min="20"
                                        controls-position="right"
                                        size="small"
                                    />
                                  </el-form-item>
                                <el-form-item label="栅格">
                                    <el-input-number
                                        v-model="isFooterhighlight.span"
                                        :min="0"
                                        :max="24"
                                        controls-position="right"
                                        size="small"
                                    />
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .sxm-header {
        background-color: rgba(220, 220, 220, 0.547);
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }

    .sxm-header .left {
        flex: 1;
        text-align: left;
    }

    .sxm-header .rigth {
        flex: 1;
        text-align: right;
    }

    .sxm-main {
        background-color: rgba(220, 220, 220, 0.547);
        margin-top: 2px;
        padding: 5px;
    }
    .prints{
        background-color: #fff;
    }
    .prints table {
        border-top: 1px solid #000 !important;
        border-left: 1px solid #000 !important;
        border-right: 1px solid #000 !important;
        border-bottom: 1px solid #000 !important;
        border-collapse: collapse !important;
        /*设置单元格的边框合并为1*/
    }

    .el-card .el-card__body {
        overflow: hidden;
        padding: 0px 0px !important;
    }

    .prints table td,
    .prints table th {
        border-left: 1px solid #000 !important;
        border-top: 1px solid #000 !important;
    }

    .disflex {
        display: flex;
    }

    .cPrint {
        width: 899px;
        overflow: auto;
        background-color: #fff;
    }

    .tPrint {
        width: 268px;
        margin-top: 2px;
        position: relative;
    }

    .prints .vxe-table--main-wrapper {
        border: 1px solid #000 !important;
    }

    .prints .vex-cell {
        white-space: pre-line;
        word-break: break-all;
        padding-left: 5px;
        padding-right: 5px;
    }

    .cardsx .el-card__body {
        overflow: hidden;
    }

    .borderbotom {
        border: 1px solid rgb(122, 122, 122);
        overflow: hidden;
    }
</style>
<script>
    import { getPrintList, getPrinData, editPrint } from "/@/api/linkoo/print";
    import { reactive, ref, toRefs, watch, nextTick, onMounted, onBeforeUnmount } from "vue"
    import XEUtils from 'xe-utils'
    import { Plus } from '@element-plus/icons-vue'
    import Sortable from "sortablejs";
    import { ElMessage } from 'element-plus'
    export default {
        name: "print2",
        props: ['sid', 'tableData'],
        setup(props, ctx) {
            let state = reactive({
                typeList:[{name:"图片",value:"image"},{name:"自定义文本",value:"customize"},{name:"文本",value:"text"},{name:"条码",value:"code"},{name:"日期",value:"date"}],//类型汇总
                DetailTables:[],
                highlight:null,
                detailHighlight:null,
                templateList: [],
                tableList:[],
                templateDetermine: null,
                DetailsData: {},
                isFooterhighlight:null,
                formData: {},
                activeName: 'first',
                mainList:[],
                isFooterSelectionChangeData:[],
                tiList:[],
                itemRefs: {},
                printData:{},
                Fields: {}
                , mainTable: {}
            })
            onMounted(() => {
                getPrintList({ tid: props.sid }).then((res) => {
                    state.templateList = res.data.list
                })
                
                props.tableData.forEach((item)=>{
                    if(item.tableType==0){
                        state.mainList=item.Fields
                    }
                })
                
            })
            const templateChange = (val) => {
                state.Fields.base = state.Fields.base || { style: {} }
                props.tableData.forEach((item) => {
                    if(item.tableType==1){
                        state.DetailTables.push(item)
                    }
                })
                console.log(val);
                getPrinData({ id: val.id, rid: props.sid }).then(res => {
                    const AllData = res.data.data
                    state.formData = XEUtils.omit(AllData, 'ChildTables')
                    if (AllData.ChildTables) {
                        state.DetailsData = XEUtils.clone(AllData.ChildTables, true)
                    }
                    state.Fields = JSON.parse(val.content)
                    state.printData=val
                    state.Fields.base = state.Fields.base || { style: {} }
                    state.Fields.header.forEach((item, index) => {
                        state.Fields.header[index].span = state.Fields.header[index].span * 1
                    })
                    changeTab(state.Fields.base.tableNames)
                    console.log(JSON.stringify(state.Fields) );
                })
            }
            const saveSettings = () => {
                state.printData.content = JSON.stringify(state.Fields)
                editPrint(state.printData).then((res) => {
                    ElMessage({
                    type: 'success',
                    message: "保存成功",
                    })
                })
            }

            const createNew=()=>{
                state.printData={name:'',content:"",templateId:props.sid,type:1,id:0}
                state.Fields={"style":{"padding":"50px 20px","width":"1160px"},"header":[],"detail":[],"title":"","extend":[],"footer":[],"base":{"style":{"paddingTop":"20px","paddingBottom":"60px","paddingLeft":"20px","paddingRight":"20px"},"iscard":0,"fy":1,"isHead":false,"isBody":true,"istail":false,"cardGrid":24,"cardInterval":2,"height":"50","tableNames":""}}
            }
            const fts = (item)=>{
                let str;
                if(item.type=='text'){
                    str=item.title
                }else if(item.type=='customize'){
                    str=item.text
                }
                return str
            }
            const ft = (item)=>{
                
                let str;
                if(item.type=='text'){
                    str=state.tableList[item.fieldName]
                }else if(item.type=='customize'){
                    str=item.text
                }
                return str
            }
            const changeTab = (val)=>{
                let arr = []
                state.DetailTables.forEach((item,index)=>{
                    if(item.tableName==val){
                        let obj = {}
                        item.Fields.forEach((sun,num)=>{
                            obj[sun.fieldName]=num
                        })
                        state.tiList=item.Fields
                        arr.push(obj)
                    }
                })
                state.tableList=arr
            }
            const fy = (i) => {
                return (state.Fields.base.fy > 0 && ((i + 1) % state.Fields.base.fy) === 0) ? 'always' : ''
            }
            const jiangepanduan = (i) => {
                if (state.Fields.base.cardInterval === 0) {
                    return
                } else if (XEUtils.arrayLastIndexOf([1, 2, 3, 4, 6, 8, 12, 24], 24 / state.Fields.base.cardInterval) === i) {
                    return 0 + 'px'
                } else {
                    return state.Fields.base.cardInterval + 'px'
                }
            }
            const tableFt = (row)=>{
                let obj ;
                state.typeList.forEach((item)=>{
                    if(item.value==row.type){
                        obj = item.name
                    }
                })
                return obj
            }
            // 表头新增
            const insertEvent = ()=>{
                state.Fields.header.unshift({type:"text",title:"",format:"",text:"",span:24,style:{fontSize:"24px"}})
            }
            // 表头删除
            const removeEvent = ()=>{
                state.handleSelectionChangeData.forEach(element => {
                    state.Fields.header.forEach((item,index)=>{
                        if(element==item){
                            state.Fields.header.splice(index,1)
                        }
                    })
                });
            }
            // 表头多选
            const handleSelectionChange = (val)=>{
                state.handleSelectionChangeData = val
            }
            // 表头当前行获取
            const handle = (val)=>{
                state.highlight = val
            }
            // 上下移动
            const moveUp = ()=>{
                let index ;
                state.Fields.header.forEach((item,sun)=>{
                    if(item==state.highlight){
                        index=sun
                    }
                })
                if(index==0){
                    return
                }
                let obj = state.Fields.header[index]
                state.Fields.header.splice(index-1,0,obj)
                state.Fields.header.splice(index+1,1)
            }
            const moveDown = ()=>{
                let index ;
                state.Fields.header.forEach((item,sun)=>{
                    if(item==state.highlight){
                        index=sun
                    }
                })
                if(index==state.Fields.header.length-1){
                    return
                }
                let obj = state.Fields.header[index]
                state.Fields.header.splice(index+2,0,obj)
                state.Fields.header.splice(index,1)
            }
            const mainTop = (value)=>{
                console.log(value);
            }
            // 表体新增
            const detailInsertEvent = ()=>{
                state.Fields.detail.unshift({type:"text",title:"",width: 85,format:"",text:"",span:12,style:{fontSize:"24px"}})
                console.log(state.Fields.detail);
            }
            // 表体删除
            const detailRemoveEvent= ()=>{
                state.detailSelectionChangeData.forEach(element => {
                    state.Fields.detail.forEach((item,index)=>{
                        if(element==item){
                            state.Fields.detail.splice(index,1)
                        }
                    })
                });
            }
            // 表体多选
            const detailSelectionChange = (val)=>{
                state.detailSelectionChangeData=val
            }
            // 表体选中
            const detailRow = (val)=>{
                state.detailHighlight = val
            }
            // 上移
            const detailMoveUp = ()=>{
                let index ;
                state.Fields.detail.forEach((item,sun)=>{
                    if(item==state.detailHighlight){
                        console.log(sun);
                        index=sun
                    }
                })
                if(index==0){
                    return
                }
                let obj = state.Fields.detail[index]
                state.Fields.detail.splice(index-1,0,obj)
                state.Fields.detail.splice(index+1,1)
            }
            const detailMoveDown = ()=>{
                let index ;
                state.Fields.detail.forEach((item,sun)=>{
                    if(item==state.detailHighlight){
                        index=sun
                    }
                })
                if(index==state.Fields.detail.length-1){
                    return
                }
                let obj = state.Fields.detail[index]
                state.Fields.detail.splice(index+2,0,obj)
                state.Fields.detail.splice(index,1)
            }
             // 表尾新增
             const isFooterinsertEvent = ()=>{
                if(!state.Fields['isFooter']){
                    state.Fields['isFooter']=[]
                }
                state.Fields.isFooter.unshift({type:"text",title:"",format:"",text:"",span:24,style:{fontSize:"24px"}})
            }
            // 表尾删除
            const isFooterremoveEvent = ()=>{
                state.isFooterSelectionChangeData.forEach(element => {
                    state.Fields.isFooter.forEach((item,index)=>{
                        if(element==item){
                            state.Fields.isFooter.splice(index,1)
                        }
                    })
                });
            }
            // 表尾上移
            const isFootermoveUp = ()=>{
                let index ;
                state.Fields.isFooter.forEach((item,sun)=>{
                    if(item==state.isFooterhighlight){
                        console.log(sun);
                        index=sun
                    }
                })
                if(index==0){
                    return
                }
                let obj = state.Fields.isFooter[index]
                state.Fields.isFooter.splice(index-1,0,obj)
                state.Fields.isFooter.splice(index+1,1)
            }
            // 表尾下移
            const isFootermoveDown = ()=>{
                let index ;
                state.Fields.isFooter.forEach((item,sun)=>{
                    if(item==state.isFooterhighlight){
                        index=sun
                    }
                })
                if(index==state.Fields.isFooter.length-1){
                    return
                }
                let obj = state.Fields.isFooter[index]
                state.Fields.isFooter.splice(index+2,0,obj)
                state.Fields.isFooter.splice(index,1)
            }
            const isFooterSelectionChange = (val)=>{
                state.isFooterSelectionChangeData = val
            }
            const isFooterRow =(item)=>{
                state.isFooterhighlight=item
            }
            return {
                ...toRefs(state),
                XEUtils,
                isFooterremoveEvent,
                isFooterRow,
                isFootermoveDown,
                isFootermoveUp,
                isFooterinsertEvent,
                templateChange,
                saveSettings,
                fts,
                isFooterSelectionChange,
                ft,
                fy,
                tableFt,
                changeTab,
                jiangepanduan,
                insertEvent,
                removeEvent,
                handleSelectionChange,
                handle,
                moveUp,
                moveDown,
                detailMoveDown,
                detailMoveUp,
                detailRow,
                detailSelectionChange,
                detailRemoveEvent,
                detailInsertEvent,createNew,
                mainTop
            }
        }
    }
</script>
<!-- 
    sid 请求
 -->